<template>
  <div>
    <van-nav-bar title="大师详情" fixed left-arrow @click-left="ClikLeft" @click-right="ClikRight">
        <van-icon size="20px" :name="fav" slot="right" />
    </van-nav-bar>
    <div class="content">
      <van-image :src="'/uploads'+masterData.thumb" fit="cover"></van-image>
      <div class="detail-text">
        <p>{{masterData.realname}}</p>
        <p v-html="masterData.introduction"></p>
        <p>现居地：{{masterData.province_name}} {{masterData.city_name}}</p>
        <p>擅长领域：{{masterData.actcate_name}}</p>
        <video controls :src="'/uploads/master/video/'+masterData.video">oops! Your video are lost</video>
      </div>
      <div>
        <p class="question-title">问大师: <van-icon @click="showq=!showq" size="24" name="comment-o"></van-icon></p>
        <van-cell-group>
          <template v-for="(v,i) in masterq">
            <van-cell
              :key="i"
              :title="v.question"
              :value="v.question_time"
              :label="v.answer===''?'大师还没有回答这个问题':v.answer"
            />
          </template>
        </van-cell-group>
      </div>
    </div>
    <van-popup v-model="showq">
        <div class="input-area">
            <van-field v-model="questionMsg" type="textarea" autosize placeholder="请输入你的问题" />
            <van-button type="primary" @click="Submit">提交</van-button>
        </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'masterdetail',
  methods: {
    ClikLeft () {
      this.$root.$router.go(-1)
    },
    Submit () {
      this.showq = !this.showq
      if (this.questionMsg !== '') {
        this.$axios.get('/api/create', {
          params: {
            SessionID: sessionStorage.sessionid,
            mod: 'masterfaq',
            user_id: sessionStorage.userid,
            question: this.questionMsg,
            master_id: this.masterData.id
          }
        }).then(response => {
          this.$toast.success('提问成功')
          this.getFAQ()
        })
      } else {
        this.$notify('请输入内容')
      }
    },
    getFAQ () {
      this.$axios
        .get('/api/lists/mod/masterfaq', {
          params: {
            master_id: this.$route.query.id
          }
        })
        .then(response => {
          this.masterq = response.data
        })
    },
    ClikRight () {
      if (this.fav === 'like-o') {
        this.$axios.get('/api/focus', {
          params: {
            SessionID: sessionStorage.sessionid,
            fans_type: 2,
            fan_id: this.masterData.id,
            user_id: sessionStorage.sessionid
          }
        }).then((result) => {
          this.fav = 'like'
          console.log('result :', result)
        }).catch((err) => {
          console.log('err :', err)
        })
      } else {
        this.$axios.get('/api/delete', {
          params: {
            SessionID: sessionStorage.sessionid,
            fans_type: 2,
            fan_id: this.masterData.id,
            user_id: sessionStorage.sessionid
          }
        }).then((result) => {
          console.log('result :', result)
          this.fav = 'like-o'
        }).catch((err) => {
          console.log('err :', err)
        })
      }
    }
  },
  mounted () {
    this.$axios
      .get('/api/get/mod/master/', {
        params: {
          SessionID: sessionStorage.sessionid,
          related: 1,
          id: this.$route.query.id,
          map: 'clubjw'
        }
      })
      .then(result => {
        this.masterData = result.data
      })
  },
  data () {
    return {
      masterData: {},
      masterq: [],
      showq: false,
      questionMsg: '',
      fav: 'like-o'
    }
  },
  created () {
    this.getFAQ()
  }
}
</script>
<style scoped>
.content {
  margin-top: 50px;
  padding: 1rem;
}
.van-nav-bar{
    border-bottom: 1px solid #ddd;
}
.content > .van-image:first-of-type {
  width: 100%;
  height: 14rem;
  border-radius: 5px;
  overflow: hidden;
}
video {
  width: 100%;
}
.detail-text {
}
.detail-text > p:first-of-type {
  font-size: 1.1rem;
  font-weight: 600;
}
.detail-text > p:nth-of-type(2) {
  text-indent: 2em;
}
.question-title{
 font-weight:600;border-bottom: 1px solid #ddd;height: 2rem;font-size:1.1rem;
 position: relative;
}
.question-title>.van-icon{
    position: absolute;
    right: 5%;
}
.van-popup{
    /* height: 15rem; */
    width: 80%;
    border-radius: 10px;
    padding: 0.5rem;
    max-height: 60%;
}
.input-area>.van-field{
    max-height: 12rem;
}
.input-area>.van-button{
    width: 100%;
    border-radius: 5px;
}
</style>
